<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- PAGE HEAD META 开始 -->
  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>PROJECT×ZO×UI Plugin</title>
  <!-- PAGE HEAD META 结束 -->

  <!-- PAGE HEAD CSS 开始 -->
  <!-- Bootstrap -->
<link href="/static/lib/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/static/lib/js/html5shiv-3.7.2.min"></script>
<script src="/static/lib/js/respond-1.4.2.min"></script>
<![endif]-->
<link href="/widget/css/common.css" rel="stylesheet">
<link href="/widget/css/zoui.css" rel="stylesheet">
<link href="/widget/css/page.css" rel="stylesheet">
  <!-- PAGE HEAD CSS 结束 -->

  <!-- 页脚JS 开始 -->
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/lib/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/lib/js/bootstrap.min.js"></script>
<script src="/widget/js/zoui.js"></script>
  <!-- 页脚JS 结束 -->
</head>
<body>
  <!-- HEADER 开始 -->
  <header>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">PROJECT×ZO×UI</a>
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              UI模块 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="/ZObjHover.htm#002">元素Hover</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="dropdown active">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              功能模块 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li class="active">
                <a href="/index.htm#001">获取页面可视区域高宽度</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              第三方插件
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="javascript:;">test</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>
  <!-- HEADER 结束 -->

  <!-- 页面内容 开始 -->
  <div id="content" class="container">
    <div class="content-inner">
      <div class="container-fluid">
        <section class="row">
          <h1 class="ZH1">002.元素Hover</h1>
          <h4 class="ZH4">
            002.1.普通模式：$('.ZObjHover-1').ZObjHover({ className: 'a' });
          </h4>
          <p class="ZKey">
            <span>VIEW</span>
          </p>
          <div class="view-box">
            <div class="ZObjHover-1">
              <a class="ZObjHover" href="javascript:;">objHover</a>
            </div>
          </div>
          <script>
            $(function() {
              $('.ZObjHover-1').ZObjHover();
            });
          </script>
          <p class="ZKey">
            <span>HTML</span>
          </p>
          <div class="code-box">
            <xmp><div class="ZObjHover-1">
  <a class="ZObjHover" href="javascript:;">objHover</a>
</div></xmp>
          </div>
          <p class="ZKey">
            <span>CSS</span>
          </p>
          <div class="code-box">
            <xmp>.ZObjHover { height: 30px; line-height: 30px; text-align: center; color: #000; background-color: #fff; border: solid 1px #000; overflow: hidden; display: block; transition: all 0.2s ease-in-out 0s; }
.ZObjHover.hover { color: #fff; background-color: #000; }</xmp>
          </div>
          <p class="ZKey">
            <span>JS</span>
          </p>
          <div class="code-box">
            <xmp>$(function() {
  $('.ZObjHover-1').ZObjHover();
});</xmp>
          </div>
          <h4 class="ZH4">
            002.2.tab模式：$('.ZObjHover-2').ZObjHover({ funType: 'tab', className: 'li' })
          </h4>
          <p class="ZKey">
            <span>VIEW</span>
          </p>
          <div class="view-box">
            <ul class="ZObjHover ZObjHover-2 clearfix">
              <li class="hover">item1</li>
              <li>item2</li>
              <li>item3</li>
            </ul>
          </div>
          <script>
            $(function() {
              $('.ZObjHover-2').ZObjHover({
                funType: 'tab',
                className: 'li'
              });
            });
          </script>
          <p class="ZKey">
            <span>HTML</span>
          </p>
          <div class="code-box">
            <xmp><ul class="ZObjHover ZObjHover-2 clearfix">
  <li class="hover">item1</li>
  <li>item2</li>
  <li>item3</li>
</ul></xmp>
          </div>
          <p class="ZKey">
            <span>CSS</span>
          </p>
          <div class="code-box">
            <xmp>.ZObjHover-2 { height: 32px; border: none; }
.ZObjHover-2 li { float: left; margin-right: 10px; width: 60px; height: 30px; line-height: 30px; text-align: center; color: #000; background: #fff; border: solid 1px #ccc; overflow: hidden; display: inline-block; cursor: pointer; transition: all 0.2s ease-in-out 0s; }
.ZObjHover-2 li.hover { color: #fff; background: #333; }</xmp>
          </div>
          <p class="ZKey">
            <span>JS</span>
          </p>
          <div class="code-box">
            <xmp>$(function() {
  $('.ZObjHover-2').ZObjHover({
    funType: 'tab',
    className: 'li'
  });
});</xmp>
          </div>
          <p class="ZKey">
            <span>API</span>
          </p>
          <div class="table-box table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <td>方法</td>
                  <td>参数</td>
                  <td>类型</td>
                  <td>默认值</td>
                  <td class="caption">说明</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <b>ZObjHover</b>
                  </td>
                  <td>NULL</td>
                  <td>NULL</td>
                  <td>NULL</td>
                  <td class="caption">元素hover状态添加删除样式名hover</td>
                </tr>
                <tr>
                  <td>
                    &nbsp;
                  </td>
                  <td>funType</td>
                  <td>String</td>
                  <td>single</td>
                  <td class="caption">选择模式；single：单选；tab：切换</td>
                </tr>
                <tr>
                  <td>
                    &nbsp;
                  </td>
                  <td>className</td>
                  <td>String</td>
                  <td>'.'&nbsp;+&nbsp;this.children().attr('class')</td>
                  <td class="caption">指定执行动作的元素className</td>
                </tr>
                <tr>
                  <td>
                    &nbsp;
                  </td>
                  <td>callback</td>
                  <td>Funtion</td>
                  <td>null</td>
                  <td class="caption">回调函数</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
  </div>
  <!-- 页面内容 结束 -->
  
  <!-- HEADER JS 开始 -->
  <script>
  $(function() {
    //ZO 20150730 #content padding自适应
    var mainPos = function() {
      setTimeout(function() {
        var navTopH = $('.navbar-fixed-top').outerHeight(true);
        $('#content').animate({
          'padding-top': navTopH
        }, 'slow');
      });
    }
    mainPos();
    $(window).resize(function() {
      mainPos();
    });
    //ZO 20150730 页面跳转后获取导航选中位置
    var navActive = function() {
      var url = document.location.href;
      if (url.indexOf('#') != -1) {
        var _v = url.split('#');
        //左栏选中
        var objNav = $('.navbar-inverse');
        objNav.find('.dropdown-menu a').each(function() {
          if ($(this).attr('href').indexOf('#') != -1) {
            var _l = $(this).attr('href').split('#');
            $(this).parent('li').attr('data-page', _l[1]);
          };
        });
        objNav.find('li').removeClass('active');
        objNav.find('.dropdown-menu li[data-page="' + _v[1] + '"]').addClass('active').parents('.dropdown').addClass('active');
      }
    }
    navActive();
  });
</script>
  <!-- HEADER JS 结束 -->
<script type="text/javascript" charset="utf-8" src="http://192.168.1.15:8132/livereload.js"></script></body>
</html>